<template>
  <div class="page-wrapper flex-vertical">
    <div class="app-container fill">
      <VForm :formData="formData" :inline="true" >
        <template #footer>
          <el-button type="primary" @click="toPage">新增</el-button>
        </template>
      </VForm>
      <table-list ref="tableRef" :columns="logsColumnData" :request="articlesList" :params="params">
        <template #操作="{row}">
          <el-button type="primary" link @click="toEdit(row)">编辑</el-button>
        </template>
      </table-list>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'Article' })
import TableList from "@/components/table-list/index.vue";
import {articlesList} from "@/api";
import {useRouter} from 'vue-router'
const router = useRouter()
const logsColumnData = ref([
  { label: "标题", prop: "title" },
  { label: "标题图", prop: "title_imgs" },
  { label: "简介", prop: "introduction" },
  { label: "内容", prop: "content" },
  { label: "是否置顶", prop: "is_top",formatter:val=>val === 1 ?'置顶':'不置顶'},
  { label: "状态", prop: "status",formatter:val=>val === 1 ?'待审批':'审核通过' },
  { label: "创作类型", prop: "creation_type",formatter:val=>val === 1 ?'原创':'转载' },
  { label: "是否推荐", prop: "is_recommend",formatter:val=>val === 1 ?'是':'否' },
  { label: "是否首页轮播", prop: "is_homepage",formatter:val=>val === 1 ?'是':'否',width:130 },
  { label: "创建时间", prop: "created_at" },
  { label: "操作",slot:"操作",fixed:'right' },
]);

const params = ref({
  type:1
})

const formData = ref([
  {
    tag:'el-input',
    label:'标题',
    prop:'title',
    rules:[
       {  message: '请选择', trigger: 'blur' },
    ]
  },
  {
    tag:'el-input',
    label:'简介',
    prop:'introduction',
    rules:[
      { message: '请选择', trigger: 'blur' },
    ]
  }
]);

const toPage = ()=>{
  router.push({
    name:'ArticleAdd'
  })
}

const toEdit = row=>{
  console.log('row',row);
  router.push({
    name:'ArticleEdit',
    params:{
      id:row.id
    }
  })
}
</script>
